<template>
  <el-dialog
    v-bind="$attrs"
    v-on="$listeners"
    center
    :visible.sync="visible"
    @close="onClose"
    :show-close="!loading"
    :close-on-click-modal="false"
    :close-on-press-escape="!loading"
  >
    <el-steps
      v-if="steps.length"
      :active="step"
      align-center
      finish-status="success"
    >
      <el-step v-for="step in steps" :key="step" :title="step"></el-step>
    </el-steps>
    <slot></slot>
    <div slot="footer" class="dialog-footer">
      <template v-if="steps.length">
        <el-button
          v-show="step"
          @click="step && $emit('update:step', step - 1)"
          icon="el-icon-arrow-left"
          >上一步</el-button
        >
        <el-button v-show="step < steps.length - 1" @click="step < 3 && next()"
          >下一步<i class="el-icon-arrow-right el-icon--right"></i
        ></el-button>
      </template>
      <el-button
        v-show="
          (step === steps.length - 1 || steps.length === 0) && type !== 'view'
        "
        type="primary"
        :loading="loading"
        @click="$emit('submit')"
        >{{ type === "add" ? "添加" : "保存" }}</el-button
      >
      <el-button
        v-show="!steps.length && type !== 'view'"
        @click="$emit('reset')"
        >重置</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import dialog from "@/mixins/component/dialog";

export default {
  name: "eaDialog",
  mixins: [dialog],
  props: {
    steps: {
      type: Array,
      default() {
        return [];
      }
    },
    step: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      loading: false
    };
  },
  methods: {
    next() {
      this.$emit("check-step-field", this.step, isValid => {
        isValid && this.$emit("update:step", this.step + 1);
      });
    }
  }
};
</script>

<style scoped>
.el-step {
  margin-bottom: 20px;
}
</style>
